<template>
	<view class='page_cont'>
		<view class='choose_wrap' @click="choose_image()">
			<view class='box' v-show="!img">
				<image class='icon' src="/static/icon49.png"></image>
				<view class='text'>请上传证书</view>
			</view>
			<image class='img' :src="img" mode="aspectFill" v-show="img"></image>
		</view>
		<view class='check_input'>
			<view class='title'>证书名称</view>
			<input type="text" class='input' @input="input_credent" :value="name" placeholder="请输入证书名称" placeholder-style="color:rgba(121,133,148,0.5);">
		</view>
		<view class='check_item' @click="check_pop()">
			<view class='title'>获得时间</view>
			<view class='nat'>{{time}}</view>
			<image class='icon' src="/static/icon43.png"></image>
		</view>
		<view class='con_btn' @click="confirm_credent()">保存</view>
		<pickerPop :showMask="show_mask" :showIndex="show_index" :title="title" :pickers="pickers" :value="value" :time="times" @closeMask="close_mask"
		 @pickerChange="picker_change" @confirmValue="confirm_value"></pickerPop>
	</view>
</template>

<script>
	import PickerPop from "../../components/pickerPop.vue"
	import other from "../../utils/other.js"
	import resume from "../../api/myResume.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				img: '',
				name: '',
				show_mask: false,
				show_index: '',
				title: '',
				pickers: [],
				value: [0],
				times: false,
				time: '',
				time_value: [0, 0, 0],
				switchOpen:true
			}
		},
		onLoad() {
			var that = this;
		},
		methods: {
			randomString(length, chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
				var result = ''
				for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
				return result
			},
			install(file, isAccept = false) {
				return new Promise((resolve, reject) => {
					let imgUrl = ''
					resume.uploadOss().then(response => {
						const info = response.data.data
						const randomStr = this.randomString(13)
						const headers = {
							'Content-Type': 'multipart/form-data',
							'Access-Control-Allow-Origin': '*'
						}
						const param = {
							key: randomStr,
							policy: info.policy,
							OSSAccessKeyId: info.accessKeyId,
							success_action_status: 200,
							signature: info.signature,
						}
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: info.host,
							filePath: file.tempFilePath,
							name: 'file',
							formData: param,
							success: (uploadFileRes) => {
								uni.hideLoading();
								const url = info.host + '/' + randomStr
								resolve(url)
							},
							fail: (err) => {
								console.log(err);
							}
						});
					})
				})
			},
			// 选择照片
			choose_image() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.img = res.tempFilePaths[0]
						const config = {
							name: res.path || '',
							tempFile: res.tempFiles[0],
							tempFilePath: res.tempFilePaths[0],
							size: res.tempFiles[0].size,
							type: 1,
						}
						this.install(config).then(response => {
							this.img = response
						})
					}
				})
			},
			// 证书名称
			input_credent(e) {
				this.name = e.detail.value;
			},
			// 选择框
			check_pop(index) {
				this.show_index = 3;
				this.title = '获得时间';
				this.times = true;
				this.value = this.time_value;
				this.show_mask = true;
			},
			// 关闭选择框
			close_mask() {
				this.show_mask = false
				this.times = false;
			},
			// 选择
			picker_change(res) {
				this.value = res;
			},
			// 确认
			confirm_value(data) {
				this.time_value = this.value;
				this.time = data[0]+'-'+data[1]+'-'+data[2]
				this.close_mask();
			},
			// 保存
			confirm_credent() {
				let validetaObj=[
					{
						value:this.img,
						show:'请上传证书'
					},
					{
						value:this.name,
						show:'请输入证书名称'
					},
					{
						value:this.time,
						show:'请选择获得时间'
					}
				]
				for(const key of validetaObj){
					if(key.value===''){
						util.page_show_toast(key.show, 3000)
						return
					}
				}
				let config = {
					name: this.name,
					time: new Date(this.time).getTime(),
					url: this.img
				}
				if(this.switchOpen){
					resume.add_teacher_certificate(config).then(res => {
						console.log(res);
						if (res.data.code === '200') {
							util.page_show_toast('添加成功', 3000)
							this.switchOpen=false
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					})					
				}

			},
		},
		components: {
			pickerPop: PickerPop
		}
	}
</script>

<style lang="scss">
	.page_cont {
		padding: 16rpx 32rpx;

		.choose_wrap {
			width: 100%;
			height: 340rpx;
			background: #F6F7F9;
			border-radius: 16rpx;

			.box {
				width: 140rpx;
				padding-top: 90rpx;
				margin: 0 auto;

				.icon {
					margin-left: 18rpx;
					width: 104rpx;
					height: 104rpx;
					margin-bottom: 16rpx;
				}

				.text {
					text-align: center;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(121, 133, 148, 0.5);
				}
			}

			.img {
				width: 100%;
				height: 340rpx;
				border-radius: 16rpx;
			}
		}

		.check_input {
			padding: 48rpx 0 32rpx 0;
			border-bottom: 2rpx solid #F7F9FB;

			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 42rpx;
				color: #3F4A58;
				margin-bottom: 24rpx;
			}

			.input {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}
		}

		.check_item {
			padding: 32rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;

			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 42rpx;
				color: #3F4A58;
			}

			.nat {
				flex: 1;
				text-align: center;
				margin: 0 24rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.con_btn {
			position: fixed;
			bottom: 32rpx;
			left: 32rpx;
			width: 686rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #fff;
			background: #5B90FF;
			border-radius: 16rpx;
		}
	}
</style>
